<template>
  <div class="wrap">
    <!-- <header-top title="首页"/> -->
    <div class="header">
      <div class="head_nav">
        <img src="../assets/images/saoyisao.png" alt="" />
        <van-search
          class="ipt"
          v-model="value"
          placeholder="请输入工厂或门店关键词"
          @search="onSearch"
          background="#198AFF"
        />
        <!-- clearable ="true" -->
        <!-- <input type="text" placeholder="请输入搜索关键词"> -->
        <img src="../assets/images/message.png" alt="" @click="message()" />
      </div>
      <div class="head_main">
        <public-title :title="headTitle" />
        <div class="h_m_echarts">
          <div class="echarts_left">
            <dashboard
              :id="echartsLeft"
              :className="echartsLeft"
              :width="chartsWidth"
              :height="chartsHeight"
              :chartData="chartsLeftData"
            />
            <p>全年累计：9865352</p>
          </div>
          <div class="echarts_right">
            <dashboard
              :id="echartsRight"
              :className="echartsRight"
              :width="chartsWidth"
              :height="chartsHeight"
              :chartData="chartsRightData"
            />
            <p>全年累计：9865352</p>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div v-for="(e, index) in PublicColumnData" :key="index">
        <public-column :PublicColumnData="e" />
      </div>
    </div>

    <div class="indexCharts">
      <div class="indexChartsLeft">
        <statistics-dashboard
          :id="statisticsChartL"
          :className="statisticsChartL"
          :width="chartsWidth"
          :height="chartsHeightS"
          :chartData="chartsRightDataL"
        />
      </div>
      <div class="indexChartsRight">
        <statistics-dashboard
          :id="statisticsChartR"
          :className="statisticsChartR"
          :width="chartsWidth"
          :height="chartsHeightS"
          :chartData="chartsRightDataR"
        />
      </div>
    </div>

    <public-title :title="billTitle" />
    <div class="billContainer">
      <div
        v-for="(billData, index) in billHandleData"
        :key="index"
        @click="homeContainer(billData)"
      >
        <bill-handler :billData="billData" />
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>
<script>
// import headerTop from '../components/HeaderTop'
import dashboard from "./charts/Dashboard.vue";
import PublicTitle from "../components/PublicTitle/index.vue";
import BillHandler from "./components/BillHandler";
import StatisticsDashboard from "./charts/StatisticsDashboard.vue";
import PublicColumn from "../components/PublicColumn/index.vue";

export default {
  name: "home",
  components: {
    // headerTop
    dashboard,
    PublicTitle,
    BillHandler,
    StatisticsDashboard,
    PublicColumn,
  },
  data() {
    return {
      value: "",
      echartsLeft: "echartsLeft",
      echartsRight: "echartsRight",
      chartsWidth: "100%",
      chartsHeight: "100%",
      chartsHeightS: "130px",
      chartsLeftData: [{ value: 385, name: "运营兑现率" }],
      chartsRightData: [{ value: 567, name: "运营率" }],
      chartsRightDataL: {
        chartDataInside: [{ value: 85, name: "占全年指标" }],
        normalData: { name: "全年累计车辆故障", num: 20 },
      },
      chartsRightDataR: {
        chartDataInside: [{ value: 75, name: "占全年指标" }],
        normalData: { name: "全年累计车辆故障", num: 20 },
      },
      headTitle: "每日运营情况",
      billTitle: "待处理单据",
      billHandleData: [
        {
          title: "服务工单",
          context: {
            name: "流程节点",
            status: "待回复",
          },
          num: 2,
          path: "daiban",
        },
        {
          title: "督办工单",
          context: {
            name: "流程节点",
            status: "待回复",
          },
          num: 2,
          path: "duban",
        },
        {
          title: "在线培训",
          context: {
            name: "流程节点",
            status: "待回复",
          },
          num: 2,
          path: "peixun",
        },
        {
          title: "在线考试",
          context: {
            name: "流程节点",
            status: "待回复",
          },
          num: 2,
          path: "kaoshi",
        },
      ],
      statisticsChartL: "statisticsChartL",
      statisticsChartR: "statisticsChartR",
      PublicColumnData: [
        [
          {
            title: "停用",
            num: 1,
            type: 0,
          },
          {
            title: "加开",
            num: 0,
            type: 1,
          },
          {
            title: "回空",
            num: 1,
            type: 2,
          },
        ],
        [
          {
            title: "停用",
            num: 1,
            type: 0,
          },
          {
            title: "加开",
            num: 0,
            type: 1,
          },
          {
            title: "回空",
            num: 1,
            type: 2,
          },
        ],
      ],
    };
  },
  mounted() {},
  methods: {
    onSearch() {
      console.log(123);
    },
    message() {
      this.$router.push({ path: "/message" });
    },
    homeContainer(data) {
      //路由跳转
      this.$router.push({ path: "/" + data.path });
    },
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../common/stylus/mixin.styl"
.wrap{
  background #f5f5f5;
  .header{
    background #198AFF
    height 125px
    .head_nav {
      height 44px
      padding-top 20px
      position relative
      .ipt{
        width 255px
        height 32px
        margin 0  10px
        border-radius 5px
        color #fff
        // opacity 0.5
        display inline-block
        /deep/ .van-field__control{
          // color red
          // background-color rgba(255, 255, 255, 0.3)
          // ::-webkit-input-placeholder {
          //   color: #ffffff;
          //   font-weight: 400;
          // }
        }
      }
      img{
          margin 0 15px
          width 20px
          height 20px
          // vertical-align middle
    }
  }

  .head_main{
    background-color #fff
    border-radius 5px
    width 345px
    height 200px
    position absolute
    top 75px
    left 15px
    font-size 15px
    .h_m_text{
      line-height 40px
      .text_one{
        width 10px
        color #198AFF
        font-weight  bold
        margin-left 15px
        display inline-block
      }
    }
    .h_m_echarts{
      // background-color red
      // opacity 0.3
      height 148px
      display flex
      justify-content space-around
      .echarts_left{
        // background pink
        width 156px
        height 100%
        position relative
        p{
          position absolute
          bottom 0
          left 20px
          color #999999
          font-size 10px
        }
      }
      .echarts_right{
        // background pink
        width 156px
        height 100%
        position relative
        p{
          position absolute
          bottom 0
          left 20px
          color #999999
          font-size 10px
        }
      }
    }
  }
}
  .indexCharts{
    background-color #fff
    border-radius 5px
    width 345px
    height 171px
    margin 0 auto
    margin-top 10px
    display flex
    justify-content space-around
    padding 10px 0
    .indexChartsLeft{
      width 172.5px
    }
    .indexChartsRight{
      width 172.5px
    }
  }
.content{
  width 345px
  margin-left 15px
  margin-top 160px
}
.billContainer{
  width 345px
  margin 0 auto;
  background-color rgb(255,255,255)
  padding-bottom 15px
  border-radius 5px
}
.bottom{
  height 54px
}
}
</style>
